<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="FastTableSample.css">

    <title>Sample Fast Table</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" src="fasttablesample/fasttablesample.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <!--
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> -->
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <table class="borderNone" >
      <tr class="borderNone">
        <td colSpan="2" class="borderNone" style="font-weight:bold;">[Beta] Experimental API to build full-featured, fast-rendering large tables, while providing full access to the underlying domain objects and DOM elements</td>        
      </tr>
      <tr class="borderNone">
        <td rowSpan="4" class="borderNone sampleLeftColumn" valign="top" ><div id="tableContainer"> </div></td>
        <td class="borderNone" ><div id="optionsContainer"> </div></td>
      </tr>
      <tr class="borderNone">
        <td class="borderNone sampleRightColumn" ><div id="loggerContainer"> </div></td>
      </tr>
      <tr class="borderNone">        
      	<td class="borderNone sampleRightColumn" valign="top" ><div id="helpContainer" style="background-color: #FFFF99;padding:1em;border-color: black;" >When the page is loaded, 100 simple domain objects are generated and displayed. <BR/><BR/>
To evaluate performance, sort by clicking a column header, or experiment with the number of sample rows to build. When supported by the browser, rows are displayed in "chunks" to improve perceived performance. Experiment with the number of rows to build initially, versus rows to build incrementally. Performance varies by browser: Chrome is excellent, IE7/8 are poor. Incremental building is not supported on IE7/8.<BR/><BR/>
Sorting demonstrates cell-level event handling. Row-level event handling is demonstrated by highlighting on mouse over, or by selecting a row. <BR/><BR/>
Selecting a row opens a drop panel, which demonstrates that we have access to the underlying domain object and DOM structure. Clicking the drop panel "OK" button exhibits the smooth integration of "setInnerHtml()" and standard GWT widget technologies.</div></td>
      </tr>
      <tr class="borderNone">        
      </tr>
    </table>
  </body>
</html>
